import React, { Component, Fragment } from 'react'
// import { Icon } from 'antd';
import avatorURL from '../../../../../images/profile photo'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_0u3o90u9e52.js',
// });

export default class MyInfoContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            clickIndex: null,
            mouseIndex: null
        }
    }

    handleClick = (index) => {
        if (index === this.state.clickIndex) {
            this.setState({
                clickIndex: null
            });
        } else {
            this.setState({
                clickIndex: index
            });
        }
    }

    handleMouseOver = (index) => {
        this.setState({
            mouseIndex: index
        });
    }

    handleMouseOut = () => {
        this.setState({
            mouseIndex: null
        });
    }

    render() {
        return (
            <div>
                <div style={{
                    height: 1,
                    width: 850,
                    backgroundColor: '#eee'
                }}></div>
                {
                    this.props.messageData.map((item, index) => {
                        let createTime = new Date(Number(item.createTime));
                        let year = createTime.getFullYear();
                        let month = createTime.getMonth() + 1;
                        let date = createTime.getDate();
                        let hour = createTime.getHours();
                        let minute = createTime.getMinutes();
                        let temp;

                        if (item.isRead) {
                            temp = (<span
                                className="anticon-portal anticonweidu"
                                style={{
                                    position: 'absolute',
                                    top: 0,
                                    color: '#f00',
                                    left: 0,
                                    fontSize: 16
                                }}
                            ></span>)
                        }
                        return (
                            <Fragment key={index}>
                                <div key={index} style={{
                                    height: 80,
                                    width: 780,
                                    paddingTop: 20,
                                    marginBottom: 20,
                                    display: 'flex',
                                    justifyContent: 'space-between'
                                }}>
                                    <div style={{
                                        position: 'relative'
                                    }}>
                                        <img src={avatorURL} alt="头像" width={60} height={60} style={{
                                            borderRadius: '50%',
                                            marginRight: 10,
                                        }} />
                                        {temp}
                                    </div>
                                    <div style={{
                                        display: 'flex',
                                        flexDirection: 'column',
                                        justifyContent: 'space-between'
                                    }}>
                                        <div style={{
                                            width: 700,
                                            height: 40,
                                            display: 'flex',
                                            justifyContent: 'space-between'
                                        }}>
                                            <div
                                                style={{
                                                    fontWeight: 'bold',
                                                    fontSize: 20
                                                }}
                                            >
                                                {item.fromUser}
                                            </div>
                                            <div style={{
                                                display: 'flex',
                                                justifyContent: 'space-between',
                                                height: 20,
                                                width: 130,
                                                position: 'relative'
                                            }}>
                                                {`${year}-${month}-${date} ${hour}:${minute}`}
                                                <span
                                                    className="anticon-portal anticoncaidan"
                                                    style={{
                                                        marginTop: 3,
                                                        height: 14
                                                    }}
                                                    onClick={() => this.handleClick(index)}
                                                ></span>
                                                <div style={{
                                                    width: 120,
                                                    position: 'absolute',
                                                    right: -130,
                                                    zIndex: 101,
                                                    backgroundColor: '#fff',
                                                    boxShadow: '0 2px 8px rgba(0,0,0,.1)',
                                                    borderRadius: 5,
                                                    display: (this.state.clickIndex === index ? 'block' : 'none')
                                                }}>
                                                    <div style={{
                                                        textAlign: 'center',
                                                        height: 40,
                                                        lineHeight: '40px',
                                                        marginTop: 5,
                                                        cursor: 'pointer',
                                                        backgroundColor: (this.state.mouseIndex === 0 ? '#ddd' : '#fff')
                                                    }} onMouseOver={() => this.handleMouseOver(0)} onMouseOut={this.handleMouseOut}>已读</div>
                                                    <div style={{
                                                        textAlign: 'center',
                                                        height: 40,
                                                        marginBottom: 5,
                                                        lineHeight: '40px',
                                                        cursor: 'pointer',
                                                        backgroundColor: (this.state.mouseIndex === 1 ? '#ddd' : '#fff')
                                                    }} onMouseOver={() => this.handleMouseOver(1)} onMouseOut={this.handleMouseOut}>删除该消息</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{
                                            color: '#bbb'
                                        }}>
                                            {item.content}
                                        </div>
                                    </div>
                                </div>
                                <div style={{
                                    height: 1,
                                    width: 850,
                                    backgroundColor: '#eee'
                                }}></div>
                            </Fragment>
                        );
                    })
                }
            </div>
        )
    }
}
